<template>
    <div class="el-main">
       <el-button type="primary" plain @click="isEdit=true" size="small" style="padding: 5px 10px;margin-bottom:30px">编 辑</el-button>
        <div style="display: flex;" class="cardBox">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>网站信息</span>
                    <!-- <el-button type="primary" @click="isEdit=true" size="small" style="float: right; padding: 5px 10px;">编 辑</el-button> -->
                </div>
                <el-form
                ref="form"
                class="form-container"
                :model="form"
                :rules="rules"
                label-width="93px"
                :disabled="!isEdit"
                >
                    <el-form-item
                    v-for="item in formOptions"
                    :key="item.prop"
                    :label="item.label"
                    :prop="item.prop"
                    >
                        <el-input
                            v-if="item.type == 'input'"
                            v-model="form[item.prop]"
                            clearable
                            :placeholder="item.placeholder"
                        ></el-input>
                        <el-select
                            v-if="item.type == 'select'"
                            v-model="form[item.prop]"
                            :placeholder="item.placeholder"
                        >
                            <el-option
                            v-for="option in item.options"
                            :key="option.vlaue"
                            :label="option.label"
                            :value="option.value"
                            ></el-option>
                        </el-select>
                        <el-input
                            v-if="item.type == 'textarea'"
                            :rows="3"
                            v-model="form[item.prop]"
                            clearable
                            :placeholder="item.placeholder"
                            type="textarea"
                        />
                        <image-upload
                            v-if="item.type == 'image'"
                            v-model="form[item.prop]"
                            :limit="1"
                            :isShowTip="false"
                            :disabled="!isEdit"
                        />
                        <file-upload
                            v-if="item.type == 'file'"
                            v-model="form[item.prop]"
                            :limit="30"
                            :disabled="!isEdit"
                        ></file-upload>
                        <el-tooltip class="item" effect="dark" :content="item.tooltipMsg" placement="top-start" v-if="item.tooltipMsg" :style="item.prop=='webIco'?'position: absolute;;left: 25%;top: 45%;':''">
                            <i class="el-icon-question" style="color: #777;margin-left: 16px;font-size:14px" />
                        </el-tooltip>
                        
                    </el-form-item>
                    <el-form-item label="备案号" prop="webRecordnum">
                        <el-input type="textarea" v-model="form.webRecordnum" placeholder="请确认" ></el-input>
                        <a href="javascript:void(0);" @click="show_recordnum('webRecordnum',1)" style="color: #3b639f;">{{ modeType1 === 'code' ? '[普通模式]' : '[代码模式]' }}</a>
                    </el-form-item>
                    <el-form-item label="公安备案号" prop="webRecordnum">
                        <el-input type="textarea" v-model="form.webGarecordnum" placeholder="请确认"></el-input>
                        <a href="javascript:void(0);" @click="show_recordnum('webGarecordnum',2)" style="color: #3b639f;white-space: nowrap;margin-left: 10px;">{{ modeType2 === 'code' ? '[普通模式]' : '[代码模式]' }}</a>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>附件扩展</span>
                    <!-- <el-button type="primary" @click="isEdit=true" size="small" style="float: right; padding: 5px 10px;">编 辑</el-button> -->
                </div>
                <el-form
                ref="form"
                class="form-container"
                :model="annexForm"
                label-width="105px"
                :disabled="!isEdit"
                >
                    <el-form-item
                    v-for="item in formOptionsTwo"
                    :key="item.prop"
                    :label="item.label"
                    :prop="item.prop"
                    >
                        <el-input
                            v-if="item.type == 'input'"
                            v-model="annexForm[item.prop]"
                            clearable
                            :placeholder="item.placeholder"
                        />
                        <el-input v-if="item.type == 'inputNumber'" v-model="annexForm[item.prop]" :min="1" :max="10"><template slot="append" @input="isNumberAllowed('annexForm',item.prop)">MB</template></el-input>
                        <el-tooltip class="item" effect="dark" :content="item.tooltipMsg" placement="top-start" v-if="item.tooltipMsg">
                            <i class="el-icon-question" style="color: #777;margin-left: 16px;font-size:14px" />
                        </el-tooltip>
                    </el-form-item>
                    
                </el-form>
            </el-card>
        </div>
        <div style="text-align: center;margin-top: 70px;">
            <el-button @click="isEdit=false" v-if="isEdit==true">取 消</el-button>
            <el-button type="primary" @click="submitForm">确认提交</el-button>
        </div>
    </div>
</template>
<script>
export default {
  name: "site",
  components: { },
  data(){
    return{
        isEdit:false,
        activeName:'first',
        modeType1: 'normal', // 'normal' 或 'code'
        modeType2: 'normal', // 'normal' 或 'code'
        // 基础信息表单项配置
        formOptions: [
            {
                type: "input",
                label: "网站简称",
                prop: "webName",
                placeholder: "请输入",
            },
            {
                type: "textarea",
                label: "网站描述",
                prop: "webDec",
                placeholder: "请输入",
            },
            {
                type: "image",
                label: "网站logo",
                prop: "webLogo",
                placeholder: "请输入",
                isHide:true
            },
            {
                type: "image",
                label: "地址栏图标",
                prop: "webIco",
                placeholder: "请输入",
                isHide:true,
                tooltipMsg:'建议尺寸 32 * 32 (像素) 的.ico文件。'
            },
            {
                type: "input",
                label: "版权信息",
                prop: "webCopyright",
                placeholder: "请输入",
            }
            
        ],
        // 表单参数
        form: {
            webName: "",
            webDec: "",
            webLogo: "",
            webIco:"",
            webCopyright:"",
            webRecordnum:'琼ICP备15003371号-22',
            webGarecordnum:""
        },
        formOptionsTwo:[
            {
                type: "input",
                label: "面包屑首页名",
                prop: "breadcrumb",
                placeholder: "请输入",
            },
            {
                type: "input",
                label: "面包屑间隔符",
                prop: "separator",
                placeholder: "请输入",
            },
            
            {
                type: "input",
                label: "图片格式",
                prop: "imgType",
                placeholder: "请输入",
            },
            {
                type: "input",
                label: "附件格式",
                prop: "annexType",
                placeholder: "请输入",
            },
            {
                type: "input",
                label: "视频格式",
                prop: "videoType",
                placeholder: "请输入",
            },
            {
                type: "inputNumber",
                label: "附件上传大小",
                prop: "annexNum",
                placeholder: "请输入",
                tooltipMsg:'附件上传大小限制'
            }
            
        ],
        annexForm:{
            breadcrumb:'',
            separator:'',
            imgType:'',
            annexType:'',
            videoType:'',
            annexNum:''
        },
        oldRecordnum:'',
        oldGarecordnum:'',
        // 表单校验
        rules: {
            // webLogo: [{ required: true, message: "该字段不能为空", trigger: "change" }],
            webName: [{required: false, min: 4, max: 10, message: "4-10个字符", trigger: "blur" },],
           
        },
    }
  },
  watch: {
    
  },
  created() {},
  mounted() {
    console.log("isEdit",this.isEdit)
  },
  methods: {
    handleClick(tab){

    },
    isNumberAllowed(formT,prop){
        this[formT][prop] = this[formT][prop].replace(/[^\d]/g, '');
        if (this[formT][prop] === '') {
            this[formT][prop] = 1;
        }
    },
    // 代码模式和普通模式切换
    show_recordnum(prop,num){
        if(!this.isEdit) return
        this['modeType'+num]=this['modeType'+num] === 'normal' ? 'code' : 'normal';
        var str=prop=='webRecordnum'?'oldRecordnum':'oldGarecordnum'
        if(this.form[prop]&&this['modeType'+num]=='code'){
            this[str]=this[str]?this[str]:`<a href="" rel="nofollow" target="_blank">${this.form[prop]}</a>`
            this.form[prop]= this[str].replace(/(<a\b[^>]*>)(.*?)(<\/a>)/, `$1${this.form[prop]}$3`);
            // this.form.webRecordnum=`<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">${str}</a>`
        }else{
            this[str]=this.form[prop]
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = this.form[prop];
            const extractedText = tempDiv.textContent || tempDiv.innerText || '';
            this.form[prop]=extractedText.trim()
        }
        console.log("this.form[prop]",this['modeType'+num],this.form[prop])
    },
    submitForm(){
        this.$refs["form"].validate((valid) => {
            if (valid) {
            this.$modal
                .confirm("是否确认提交该条信息?")
                .then(() => {
                    var parms={
                        ...form,
                        webRecordnum:this.modeType1=='normal'?this.oldRecordnum.replace(/(<a\b[^>]*>)(.*?)(<\/a>)/, `$1${this.form.webRecordnum}$3`):this.form.webRecordnum,
                        webGarecordnum:this.modeType2=='normal'?this.oldGarecordnum.replace(/(<a\b[^>]*>)(.*?)(<\/a>)/, `$1${this.form.webGarecordnum}$3`):this.form.webGarecordnum
                    }
                    console.log("parms",parms)
                })
                .catch(() => {});
            } else {
                return false;
            }
        });
    }
  }
}
</script>
<style lang="scss" scoped>
.form-container{
    margin-top: 20px;
}
::v-deep  .cardBox{
    .el-card{
        width: 50%;
        margin-left: 20px;
    }
    .el-card:first-child{
        margin-left: 0px;
    }
    .el-form-item{
        position: relative;
        width: 90%;
        .el-form-item__content{
            position: relative;
            display: flex;
            align-items: center;
            a{
                color: rgb(59, 99, 159);
                white-space: nowrap;
                margin-left: 10px;
                position: absolute;
                right: -72px;
                top: 10px;
            }
        }
        // .el-tooltip{
        //     position: absolute;
        //     top: 50%;
        //     left: 21%;
        // }
    }
}
</style>